<template>
  <div class="phonedetail" >
      <div class="phonedetail_list" v-for="(item,index) in list" :key="index">
          <div class="phonedetail_title">{{item.title}}</div>
          <div class="phonedetail_list_rl">
              <div class="phonedetail_list_rl_time">{{item.add_time | setTime}}</div>
              <div class="phonedetail_list_rl_number">点击量：{{item.click}}</div>
          </div>
          <div class="preview_box">
              <vue-preview  :slides="imglist" @close="handleClose"></vue-preview>
          </div>
          <div class="phonedetail_list_content" v-html="item.content"></div>
      </div>
  </div>
</template>

<script>
export default {
    name:'phonedetail',
    data(){
        return{
            list:[],
            imglist:[]
        }
    },
    methods:{
        getdetail(){
            this.$axios.get('http://www.liulongbin.top:3005/api/getimageInfo/' + this.$route.params.id).then((res) => {
                console.log(res);
                if(res.data.status == 0){
                    this.list = res.data.message;
                }
            })
            this.$axios.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.$route.params.id).then((res) => {
                console.log(res);
                if(res.data.status == 0){
                    res.data.message.forEach((item,index) =>{
                        item.msrc=item.src,
                        item.alt = index,
                        item.title = "第" + index + "张",
                        item.w=600,
                        item.h=400
                    })
                    this.imglist = res.data.message;
                    console.log(this.imglist);
                }
            })
        },
        handleClose(){
            console.log("aaaa");
        }
    },
    created(){
        console.log(this.$route.params.id);
        this.getdetail();
        console.log(this.list)
    }
}
</script>

<style>
    .phonedetail_title{
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size:16px;
        font-weight: bold;
    }
    .phonedetail_list_rl{
        margin-top:10px;
        padding:0 10px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size:12px;
        color:#999;
    }
    .phonedetail_list_content{
        margin-top:10px;
        padding:0 10px;
    }
    .preview_box{
        width:100%;
        padding:0 10px;
        box-sizing: border-box;
    }
    .preview_box .my-gallery{
        width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .preview_box figure{
        margin-left:5px;
    }
    .preview_box .my-gallery img{
        width:80px;
        height: 80px;
    }
</style>